<template>
  <el-tabs v-model="activeName">
    <el-tab-pane
      label="我分配的任务"
      name="sendTable"
    >
      <list-condition-template
        ref="sendTable"
        :rows="rows"
        :defaultSort="{ prop: 'updateTime', order: 'descending' }"
        :total="total"
        @page-info-change="handlePageInfoChange"
        :search-data="sendListQuery"
        :batch-column="false"
      >
        <template slot="condition">
          <el-form-item prop="keyword">
            <el-input
              placeholder="名称"
              v-model="sendListQuery.keyword"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item prop="status">
            <el-select
              v-model="sendListQuery.status"
              value-key="name"
              clearable
              placeholder="状态"
            >
              <el-option
                v-for="(item, key) in $CONST.TASK_STATUS"
                :key="key"
                :label="item.title"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </template>

        <template slot="columns">
          <el-table-column
            label="任务"
            min-width="160"
            align="center"
            property="name"
            fixed
          ></el-table-column>

          <el-table-column
            label="所属订单"
            min-width="100"
            align="center"
            property="order.serialNumber"
          ></el-table-column>
          <el-table-column
            label="执行厂家"
            min-width="100"
            align="center"
            property="execFactory.name"
          ></el-table-column>
          <el-table-column
            label="状态"
            sortable="custom"
            min-width="150"
            align="center"
            property="status.desc"
          ></el-table-column>
          <el-table-column
            label="备注"
            min-width="150"
            align="center"
            property="memo"
          ></el-table-column>
          <el-table-column
            label="创建日期"
            sortable="custom"
            min-width="150"
            align="center"
            property="createTime"
          ></el-table-column>
          <el-table-column
            label="修改日期"
            sortable="custom"
            min-width="150"
            align="center"
            property="updateTime"
          ></el-table-column>
          <el-table-column
            align="center"
            label="详情"
            class-name="fixed-width"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="showDetail(scope.row)"
                v-waves
              >查看</el-button>
              <task-control
                style="margin-left:10px;"
                :execFactoryId="scope.row.execFactoryId"
                v-if="scope.row.status"
                :taskStatus="scope.row.status"
                :taskId="scope.row.id"
                @onSuccess="getList"
              />
            </template>
          </el-table-column>
        </template>
      </list-condition-template>

    </el-tab-pane>
    <el-tab-pane
      label="我接收的任务"
      name="getTable"
    >
      <list-condition-template
        ref="getTable"
        :rows="rows"
        :defaultSort="{ prop: 'createTime', order: 'descending' }"
        :total="total"
        @page-info-change="handlePageInfoChange"
        :search-data="getListQuery"
        :batch-column="false"
      >
        <template slot="condition">
          <el-form-item prop="keyword">
            <el-input
              placeholder="名称"
              v-model="getListQuery.keyword"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item prop="status">
            <el-select
              v-model="getListQuery.status"
              value-key="name"
              clearable
              placeholder="状态"
            >
              <el-option
                v-for="(item, key) in $CONST.TASK_STATUS"
                :key="key"
                :label="item.title"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </template>

        <template slot="columns">
          <el-table-column
            label="任务"
            min-width="160"
            align="center"
            property="name"
            fixed
          ></el-table-column>
          <el-table-column
            label="发起的厂家"
            min-width="100"
            align="center"
            property="order.factory.name"
          ></el-table-column>
          <el-table-column
            label="状态"
            sortable="custom"
            min-width="150"
            align="center"
            property="status.desc"
          ></el-table-column>
          <el-table-column
            label="备注"
            min-width="150"
            align="center"
            property="memo"
          ></el-table-column>
          <el-table-column
            label="创建日期"
            sortable="custom"
            min-width="150"
            align="center"
            property="createTime"
          ></el-table-column>
          <el-table-column
            label="修改日期"
            sortable="custom"
            min-width="150"
            align="center"
            property="updateTime"
          ></el-table-column>
          <el-table-column
            align="center"
            label="详情"
            class-name="fixed-width"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="showDetail(scope.row)"
                v-waves
              >查看</el-button>
              <task-control
                style="margin-left:10px;"
                :execFactoryId="scope.row.execFactoryId"
                v-if="scope.row.status"
                :taskStatus="scope.row.status"
                :taskId="scope.row.id"
                @onSuccess="getList"
              />
            </template>
          </el-table-column>
        </template>
      </list-condition-template>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import taskAPI from '@/api/task'
import taskControl from '@/components/order/TaskControl'
import waves from '@/directive/waves' // 水波纹指令
import ListConditionTemplate from '@/components/templates/listConditionTemplate'

export default {
  directives: {
    waves
  },
  components: {
    taskControl,
    ListConditionTemplate
  },
  watch: {
    activeName (val) {
      this.handleFilter()
    }
  },
  data () {
    return {
      activeName: 'sendTable',
      selectLoading: false,
      rows: [],
      total: 0,
      dateArray: [],
      sendListQuery: {
        keyword: null
      },
      getListQuery: { keyword: null },
      levels: []
    }
  },
  methods: {
    /**
     * 加载数据
     */
    getList (pageInfo) {
      taskAPI
        .getPaged({ condition: this.sendListQuery, pageInfo })
        .then((response) => {
          console.log('res', response)

          this.rows = response.data.content
          this.total = response.data.totalElements
        })
    },

    getMyTaskList (pageInfo) {
      taskAPI
        .getMyTasks({ condition: this.getListQuery, pageInfo })
        .then((response) => {
          console.log('res', response)

          this.rows = response.data.content
          this.total = response.data.totalElements
        })
    },
    /**
     * 搜索条件变更处理
     */
    handleFilter () {
      this.$refs[this.activeName].changeCondition()
    },
    /**
     * 分页信息变动事件处理
     * @param  {Object} pageInfo 分页信息
     */
    handlePageInfoChange (pageInfo) {
      if (this.activeName === 'sendTable') {
        this.getList(pageInfo)
      } else {
        this.getMyTaskList(pageInfo)
      }
    },
    /**
     * 查看详情点击处理
     * @param {*} row 参数
     */
    showDetail (row) {
      this.$router.pushTo(this.$router.routesConfig.taskInfo, row.id)
    }
  }
}
</script>
